<template>
	<div class="sliderassembly">
		<el-collapse v-model="activeNames" class="widget-collapse">
			<el-collapse-item :title="items.title" :name="index + 1" v-for="(items, index) in datas" :key="index">
				<draggable tag="ul" v-model="items.comList" :group="{ name: 'comList', pull: 'clone', put: false }"
					:sort=false :clone="cloneDefaultField" item-key="sliderassembly-draggable">
					<template #item="{element, index}">
							<li class="componList" :itemKey="index+ '-' + Date.now()" :id="index+ '-' + Date.now()"
								:data-name="element.component">
								<div class="comonButton">
									<el-icon  v-if="element.icon">
										<component :is="element.icon" />
									</el-icon>
									<i class="iconfont" :class="element.customIcon" v-else-if="element.customIcon" />
									<!-- <van-icon :name="element.vanIcon" v-else /> -->
									<span>{{ element.text }}</span>
								</div>
							</li>
					</template>
				</draggable>

			</el-collapse-item>

		</el-collapse>
	</div>
</template>

<script>
	import draggable from 'vuedraggable'
	import componentProperties from '@/utils/componentProperties' // 组件数据
	export default {
		name: 'sliderassembly',
		components: {
			draggable
		},
		props: {
			pointer: Object,
		},
		onLoad() {
			console.info(this.datas)
		},

		data() {
			return {
				activeNames: [1, 2, 3, 4, 5] /* 侧边栏组件显示 */ ,
				datas: [{
						title: '容器组件',
						comList: [
							componentProperties.get("WdLayout"),
							componentProperties.get("kForm"),
						]
					},
					{
						title: '基础组件',
						comList: [
							componentProperties.get("WdCaptiontext"),
							componentProperties.get("WdPictureads"),
							componentProperties.get("WdNotice"),
							componentProperties.get("WdGrid"),
							componentProperties.get("WdCellGroup")
						],
					},
					{
						title: '表单组件',
						comList: [
							componentProperties.get("kInput"),
						]
					},
					{
						title: '高级组件',
						comList: [
							componentProperties.get("richtext")
						]
					},
					{
						title: '商铺组件',
						comList: [
							componentProperties.get("listswitching"),
						]
					},
					{
						title: '规划中',
						comList: [
							componentProperties.get("custommodule"),
							componentProperties.get("suspension"),
							componentProperties.get("videoss"),
							componentProperties.get("magiccube"),
							componentProperties.get("graphicnavigation"),
							componentProperties.get("tabBar"),
						]
					},
					{
						title: '过期组件',
						comList: [

							componentProperties.get("commoditysearch"),
						]
					}

				],
			}
		},
		methods: {
			cloneDefaultField(event) {
				if (!event || !event.component) {
					console.error('Invalid component data:', event);
					return null;
				}
				const clone = JSON.parse(JSON.stringify(event));
				clone.id = "widget-" + Date.now();
				return clone;
			},

		},
	}
</script>

<style scoped lang="scss">
	/* 组件 */
	.sliderassembly {

		/* 滚动条 */

		&::-webkit-scrollbar {
			width: 1px;
		}

		&::-webkit-scrollbar-thumb {
			background-color: $uni-color-primary;
		}

		//
		///deep/ .el-collapse-item__header,


		.widget-collapse {
			border-top-width: 0;

			::v-deep .el-collapse-item__header {
				// margin-left: 8px;
				// font-style: italic;
				// font-weight: bold;
			}

			::v-deep .el-collapse-item__wrap {
				border-bottom: 1px solid #ebeef5;
				padding-bottom: 10px;
			}

			::v-deep .el-collapse-item__content {
				padding-bottom: 6px;
				/* 组件列表 */

				ul {
					padding-left: 10px;
					/* 重置IE11默认样式 */
					margin: 0;
					/* 重置IE11默认样式 */
					margin-block-start: 0;
					margin-block-end: 0.25em;
					padding-inline-start: 10px;

					//&:after {
					//  content: "";
					//  display: block;
					//  clear: both;
					//}

					.componList {
						display: inline-block;
						height: 28px;
						line-height: 28px;
						width: 100px;
						float: left;
						margin: 2px 4px 2px 0;
						cursor: move;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						background: $uni-bg-color-grey;
					}

					.componList:hover {
						background: $uni-bg-color-hover;
						outline: 1px solid $uni-color-primary;
					}

					.comonButton {
						display: flex;
						align-items: center;
						// font-size: 12px;
						color: $uni-text-color;
						padding-left: 4px;
					}

					.comonButton:hover {
						color: $uni-color-primary;
					}

					span {
						padding-left: 5px;
					}
				}
			}
		}


	}
</style>
